<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>花样链接卡</title>
        <style type="text/css">
            div{
                width:322px;
                height:322px;
                padding:10px;
                border:1px solid #ccc;
                box-sizing:border-box;
            }
            a{
                display:block;
                background:pink;
                width:100px;
                height:100px;
                text-align:center;
                color:white;
                line-height:100px;
                text-decoration: none;
                position:relative;
            }
            a:hover{
                background:blue;
            }
            a:nth-of-type(even){
                left:200px;
                top:-100px;
            }
            a:last-of-type {
                top:-300px;
                left:100px;
            }

        </style>
    </head>
    <body>
        <div>
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
        </div>
    </body>
</html>